<template>
  <el-card class="box-card">
    <!-- 提示栏上方部分 -->
    <BaseQuestionsTitle
    :form='reqForm'
    @clearForm='clearForm'
    @searchRes='searchRes'
    ></BaseQuestionsTitle>
    <!-- 灰色提示栏 -->
    <el-alert
      type="info"
      show-icon
      :closable="false"
      >
      数据一共{{total}}条
    </el-alert>
    <!-- 显示区域 -->
    <BaseQuestionsBody
    :reqForm='reqForm'
    @transTotal='total=$event'
    @loadList='loadbaseList'
    :baseList='baseList'
    :total='total'
    ></BaseQuestionsBody>
  </el-card>
</template>

<script>
import BaseQuestionsTitle from '../components/BaseQuestionsTitle.vue'
import BaseQuestionsBody from '../components/BaseQuestionsBody.vue'
import { list as loadbaseList } from '@/api/hmmm/questions'

export default {
  components: {
    BaseQuestionsTitle,
    BaseQuestionsBody
  },

  data () {
    return {
      reqForm: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      },
      total: 2,
      baseList: []
    }
  },

  created () {
    this.loadbaseList()
  },

  methods: {
    clearForm () {
      this.reqForm = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      }
    },
    searchRes (e) {
      this.total = e.counts
      this.baseList = e.items
    },
    async loadbaseList () {
      const res = await loadbaseList(this.reqForm)
      console.log(res)
      this.baseList = res.data.items
      this.total = res.data.counts
      // this.$emit('transTotal', res.data.counts)
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 10px;
}
/deep/.el-alert__icon{
  font-size: 16px !important;
  width: 16px !important;
}
</style>
